<template>
  <div>
    <!-- <div class="cartBar">
      <div class="icon">
        <div>联系客服</div>
        <div>进店</div>
        <div>购物车</div>
      </div>

      <div class="cartBtn" @touchmove.prevent>
        <div class="cartAdd" @click="flg = true">加入购物车</div>
        <div class="buy">直接购买</div>
      </div>
    </div>-->
    <div class="sku" v-show="flg">
      <div class="mask" @click="flg = false" v-show="flg"></div>
      <transition name="skuMain">
        <div class="main" v-show="flg">
          <div class="head">
            <img src="@/assets/images/product_1.jpg" alt />
            <div class="news">
              <p class="price">
                <span>¥666</span>.66
              </p>
              <p class="choose">
                <span>已选:</span>
                {{colorList[colorIndex]}},{{sizeList[sizeIndex]}},{{count}}件
              </p>
            </div>
          </div>
          <div class="body">
            <div class="pColor">
              <div class="title">颜色</div>
              <span
                class="kind"
                @click="colorIndex = index"
                :class="colorIndex == index ? 'active' : ''"
                v-for="(item,index) in colorList"
                :key="index"
              >{{item}}</span>
            </div>
            <div class="pSize">
              <div class="title">尺寸</div>
              <span
                class="kind"
                @click="sizeIndex = index"
                :class="sizeIndex == index ? 'active' : ''"
                v-for="(item,index) in sizeList"
                :key="index"
              >{{item}}</span>
            </div>
            <div class="pCount">
              <div class="title">
                数量
                <span @click="count++">+</span>
                <input type="text" v-model="count" />
                <span @click="count > 1 ? count-- : 1">-</span>
              </div>
            </div>
          </div>
          <div class="btn">确认</div>
        </div>
      </transition>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" url="https:www.baidu.com" />
      <van-goods-action-icon icon="cart-o" text="购物车" info="5" :to="{path : '/Cart'}" />
      <van-goods-action-icon icon="shop-o" text="店铺" info="12" :to="{name : 'Home'}" />
      <van-goods-action-button type="warning" text="加入购物车" @click="show = true" />
      <van-goods-action-button type="danger" text="立即购买" />
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        style="text-align:left"
      />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flg: false,
      count: 1,
      colorList: ["红", "橙", "黄", "绿", "青", "蓝", "紫"],
      sizeList: ["M", "L", "XL", "XXL", "XXXL"],
      colorIndex: 0,
      sizeIndex: 0,
      show: false,
      goods: {
  // 默认商品 sku 缩略图
  picture: 'https://img.yzcdn.cn/1.jpg'
},
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "图样", // skuKeyName：规格类目名称
            v: [
              {
                id: "30349", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: require("@/assets/images/icon/66/1.jpg"), // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: require("@/assets/images/icon/66/1.jpg") // 用于预览显示的规格类目图片
              },
              {
                id: "1215",
                name: "蓝色",
                imgUrl: require("@/assets/images/icon/66/2.jpg"),
                previewImgUrl: require("@/assets/images/icon/66/2.jpg")
              }
            ],
            k_s: "s1" // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          },
          {
            k: "尺寸", // skuKeyName：规格类目名称
            v: [
              {
                id: "303491", // skuValueId：规格值 id
                name: "16寸", // skuValueName：规格值名称
                imgUrl: require("@/assets/images/icon/66/3.jpg"), // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: require("@/assets/images/icon/66/3.jpg") // 用于预览显示的规格类目图片
              },
              {
                id: "12151",
                name: "20寸",
                imgUrl: require("@/assets/images/icon/66/4.jpg"),
                previewImgUrl: require("@/assets/images/icon/66/5.jpg")
              }
            ],
            k_s: "s2" // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          },
          {
            k: "颜色", // skuKeyName：规格类目名称
            v: [
              {
                id: "3034911", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: require("@/assets/images/icon/66/5.jpg"), // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: require("@/assets/images/icon/66/5.jpg") // 用于预览显示的规格类目图片
              },
              {
                id: "121511",
                name: "蓝色",
                imgUrl: require("@/assets/images/icon/66/6.jpg"),
                previewImgUrl: require("@/assets/images/icon/66/6.jpg")
              }
            ],
            k_s: "s3" // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId，下单时后端需要
            price: 100, // 价格（单位分）
            s1: "1215", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "12151", // 规格类目 k_s 为 s2 的对应规格值 id
            s3: "121511", // 最多包含3个规格值，为0表示不存在该规格
            stock_num: 110 // 当前 sku 组合对应的库存
          }
        ],
        price: "10.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        // messages: [
        //   {
        //     // 商品留言
        //     datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
        //     multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
        //     name: "留言", // 留言名称
        //     type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
        //     required: "1", // 是否必填 '1' 表示必填
        //     placeholder: "" // 可选值，占位文本
        //   }
        // ],
        // hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        // 数据结构见下方文档
      },
      messageConfig: {
        // 数据结构见下方文档
      }
    };
  },
  methods: {
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    }
  }
};
</script>

<style lang="less" scoped>
.cartBar {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  overflow: hidden;
  zoom: 1;
  background-color: hsla(0, 0%, 100%, 0.95);
  text-align: center;
  line-height: 50px;
  border-top: 1px solid rgba(1, 1, 1, 0.1);
  box-sizing: border-box;

  .icon {
    width: 42%;
    font-size: 12px;
    float: left;

    div {
      width: calc(100% / 3);
      float: left;
    }
  }
  .cartBtn {
    width: 58%;
    float: left;
    color: white;
    div {
      width: 50%;
      float: left;
    }
    .cartAdd {
      background: linear-gradient(138deg, #ffa600, #ffb000 77%, #ffbc00);
    }
    .buy {
      background: linear-gradient(-41deg, #ff4f18, #ff2000 24%, #f10000);
    }
  }
}
.sku {
  width: 100%;
  height: 100%;
  text-align: left;

  .mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
  }
  .main {
    width: 100%;
    min-height: 375px;
    max-height: 475px;
    background: white;
    position: fixed;
    bottom: 0;

    .head {
      //   width: 100%;
      //   height: 80px;

      img {
        position: absolute;
        left: 10px;
        top: -20px;
        border-radius: 2px;
        width: 90px;
        height: 90px;
      }
      .news {
        height: 70px;
        padding: 0 0 10px 110px;
        background-color: #fff;
        overflow: hidden;
        zoom: 1;

        .price {
          font-size: 10px;
          line-height: 40px;
          color: #e4393c;
          float: left;

          span {
            font-size: 16px;
            font-style: normal;
          }
        }
        .choose {
          font-size: 12px;
          text-align: left;
          padding-top: 50px;
          padding-right: 10px;

          span {
            color: #999;
          }
        }
      }
    }
    .body {
      overflow: hidden;
      zoom: 1;
      .title {
        font-size: 12px;
        color: #999;
        margin: 0 10px;
        height: 40px;
        line-height: 40px;
        text-align: left;
        display: block;
      }
      .kind {
        display: inline-block;
        padding: 0 10px;
        min-width: 20px;
        max-width: 270px;
        overflow: hidden;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-left: 10px;
        margin-bottom: 10px;
        border-radius: 4px;
        color: #333;
        background-color: #f7f7f7;
        font-size: 14px;
        margin-bottom: 10px;

        &.active {
          background: linear-gradient(-41deg, #ff4f18, #ff2000 24%, #f10000);
          color: white;
        }
      }
      .pCount {
        // background: pink;
        padding-top: 5px;
        box-sizing: border-box;

        span {
          //   display: inline-block;
          width: 30px;
          height: 30px;
          background: rgb(247, 247, 247);
          line-height: 30px;
          text-align: center;
          float: right;
          font-size: 25px;
        }
        input {
          float: right;
          height: 30px;
          width: 30px;
          color: #333;
          background: #fff;
          font-size: 12px;
          text-align: center;
          border-style: none;
        }
      }
    }
    .btn {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 50px;
      background: linear-gradient(-41deg, #ff4f18, #ff2000 24%, #f10000);
      color: white;
      line-height: 50px;
      font-size: 16px;
    }
  }
}
.skuMain-enter,
.skuMain-leave-to {
  transform: translateY(100%);
}
.skuMain-enter-active,
.skuMain-leave-active {
  transition: all 0.2s linear;
}
.skuMain-enter-to,
.skuMain-leave {
  transform: translateY(0);
}
</style>